<template>
  <a-drawer
    :visible="visible"
    @close="onClose"
    :closable="true"
    :body-style="{ paddingBottom: '80px' }"
    :drawer-style="{ backgroundColor: '#f0f2f5' }"
    width="80%"
  >
    <div>
      <a-card>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="4">
                <a-form-item label="">
                  <a-input placeholder="兑换码" v-model="searchData.redeemCode"/>
                </a-form-item>
              </a-col>
              <a-col :md="4">
                <a-form-item label="">
                  <a-select v-model="searchData.redeemStatus" placeholder="兑换状态" default-value="">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option value="1">待兑换</a-select-option>
                    <a-select-option value="2">已兑换</a-select-option>
                    <a-select-option value="3">已取消</a-select-option>
                    <a-select-option value="4">已删除</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :sm="6">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" icon="search" @click="searchFunc(true)">查询</a-button>
                  <a-button style="margin-left: 8px" icon="reload" @click="() => this.searchData = {}">重置</a-button>
                </span>
              </a-col>
              <!-- <a-col :sm="10">
                <p class="redTip">手续费：0.00</p>
              </a-col> -->
            </a-row>
          </a-form>
        </div>
        
        <!-- 列表渲染 -->
        <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="searchData"
        >
          <template slot="redeemStatus" slot-scope="{record}">
            <p v-if="record.redeemStatus==1">待兑换</p>
            <p v-else-if="record.redeemStatus==2">已兑换</p>
            <p v-else-if="record.redeemStatus==3">已取消</p>
            <p v-else-if="record.redeemStatus==4">已删除</p>
            <p v-else>--</p>
          </template>
          <template slot="black">
            <p>否</p>
          </template>
          <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
            <JeepayTableColumns v-if="record.redeemStatus==1">
              <a-button type="link" @click="invalid(record)">作废</a-button>
            </JeepayTableColumns>
          </template>
        </JeepayTable>
      </a-card>
    </div>
    <div class="drawer-btn-center ">
      <a-button :style="{ marginRight: '8px' }" @click="onClose" icon="close">关闭</a-button>
    </div>
  </a-drawer>
</template>

<script>
import JeepayCard from '@/components/JeepayCard/JeepayCard'
import JeepayTable from '@/components/JeepayTable/JeepayTable'
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_URL_PACKET_ORDER_LIST, req, invalid } from '@/api/manage'
const tableColumns = [
    { key: 'activeName', title: '红包名称', dataIndex: 'activeName' },
    { key: 'redeemCode', title: '兑换码', dataIndex: 'redeemCode' },
    { key: 'userName', title: '兑换用户', dataIndex: 'userName' },
    { key: 'redeemStatus', title: '兑换状态', scopedSlots: { customRender: 'redeemStatus' } },
    { key: 'createdAt', title: '兑换时间', dataIndex: 'createdAt' },
    { key: 'black', title: '是否黑名单', scopedSlots: { customRender: 'black' } },
    { key: 'ip', title: 'IP', dataIndex: 'ip' },
    { key: 'sh', title: '审核', dataIndex: 'sh' },
    { key: 'tx', title: '头像', dataIndex: 'tx' },
    { key: 'op', title: '操作', width: '200px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
]

export default {
  components: {
    JeepayCard,
    JeepayTable,
    JeepayTableColumns,
  },
  data () {
    return {
      btnLoading: false,
      appId: null, // 应用appId
      visible: false, // 抽屉开关
      jeepayCard: { // 卡片配置
        height: 300,
        span: { xxl: 6, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }
      },
      tableColumns: tableColumns,
      searchData: {},
    }
  },
  methods: {
    // 弹层打开事件
    show (batchNo) {
      this.searchData.batchNo = batchNo;
      this.ifCode = null
      this.visible = true
      this.searchFunc()
    },
    reqTableDataFunc: (params) => {
      return req.list(API_URL_PACKET_ORDER_LIST, params)
    },
    searchFunc: function () { // 点击【查询】按钮点击事件
      this.$refs.infoTable.refTable(true)
    },
    // 抽屉关闭
    onClose () {
      this.visible = false
    },
    invalid(item){
      invalid(item.id).then(res => {
        this.$message.success('操作成功');
        this.searchFunc();
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .jeepay-card-content {
    width: 100%;
    position: relative;
    background-color: @jee-card-back;
    border-radius: 6px;
    overflow:hidden;
  }
  .jeepay-card-ops {
    width: 100%;
    height: 50px;
    background-color: @jee-card-back;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid @jee-back;
    position: absolute;
    bottom: 0;
  }
  .jeepay-card-content-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .jeepay-card-content-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .title {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 1px;
  }
</style>
